<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围
			 min-width属性：最小宽度 [√]      min-height属性：最小高度
			 max-width属性：最大宽度       max-height属性：最大宽度*/
			/* div{
				 width: 80%;       /* 默认宽度 */    
				  min-width: 500px;/*内容最小宽度是500px，不能改变*/
				  max-width: 800px;   /* 页面尺寸最小是500,最大是800,默认百分之80 */
				  /* 定好最小跟最大宽高，PC：80% 300px
				                       移动端 500-600宽度【页面不变】   300px
									   自适应
				   */
				 height: 300px;
				 background: #ff007f;
			 } */
			 /* html结构    外层div---conntainer     内层div--.box   写lorem
			  css结构       .container样式：背景颜色#f0f0f0;
			                               padding:20px;
										   文本居中
							.box样式：背景颜色#4caf50;
							          文字改下颜色：白色
									  宽度60%
									  宽度范围：500-600px【页面不变】
									  margin:auto;
			*/
		   .container{
			   background: #f0f0f0;
			   padding: 20px;
			   align-center;
			   
		   }
		   .box{
			   background: #4caf50;
			   color: white;
			   width: 60%;
			   min-width: 500px;
			   max-width: 600px;
			   margin: auto;
		   }
		</style>
	</head>
	<body>
		<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolor? Commodi obcaecati harum laudantium vero fuga culpa? Veritatis illum placeat aliquid accusantium iste, voluptate consequatur commodi repellendus veniam harum vitae.</div>
		<div>
			<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe voluptatibus est dolores, vel asperiores vero, dignissimos modi, fuga qui ut rerum. Quae quis nesciunt quibusdam odio consequatur in consectetur earum.</div>
		</div>
	</body>
</html>